<section class="container-fluid">

    <div class="page-header">
        <h4 ng-bind="vm.article.title"></h4>
    </div>

    <!--<div id="listItemCarousel" class="carousel slide">-->
        <!--&lt;!&ndash; 轮播（Carousel）指标 &ndash;&gt;-->
        <!--<ol class="carousel-indicators">-->
            <!--<li ng-repeat="pic in vm.article.imgs" data-target="#listItemCarousel" data-slide-to="{{$index}}" class="{'active' : $index == 0"></li>-->
        <!--</ol>-->

        <!--&lt;!&ndash; 轮播（Carousel）项目 &ndash;&gt;-->
        <!--<div class="carousel-inner">-->
            <!--<div ng-repeat="(index, pic) in vm.article.imgs" ng-class="{'item active': index == 0, 'item': index != 0}">-->
                <!--<img class="img-responsive center-block carousel-img-size" id="carousel-img-size-id" ng-src="{{pic}}" alt="First Pic">-->
            <!--</div>-->
        <!--</div>-->

        <!--<a class="left carousel-control" href="" ng-click="vm.slide('prev')" role="button" data-slide="prev">-->
            <!--<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>-->
        <!--</a>-->
        <!--<a class="right carousel-control" ng-click="vm.slide('next')" role="button" data-slide="next">-->
            <!--<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>-->
        <!--</a>-->
    <!--</div>-->

    <!--NOTE: Just for loading all the imgs, but not shown-->
    <div class="col-md-12 col-sm-12 col-xs-12 no-padding-left no-padding-right" ng-hide>
        <ul class="list-unstyled">
            <li ng-repeat="pic in vm.article.imgs" class="col-md-12 col-sm-12 col-xs-12 no-padding-left no-padding-right" ng-hide="true">
                <img ng-src="{{pic}}" alt="Oh，错了" class="article-view-img img-responsive center-block">
                <span class="badge article-view-indicator hidden-lg hidden-md">{{$index + 1}}&nbsp;&nbsp;/&nbsp;&nbsp;{{vm.article.imgs.length}}</span>
            </li>
        </ul>
    </div>

    <div id="articleImgCarousel" class="col-md-12 col-sm-12 col-xs-12 no-padding-left no-padding-right" ng-cloak>
        <img ng-src="{{vm.article.imgs[vm.article.curImgIndex]}}" alt="Oh，错了" class="article-view-img img-responsive center-block">
        <span class="badge article-view-indicator hidden-lg hidden-md">{{vm.article.curImgIndex + 1}}&nbsp;&nbsp;/&nbsp;&nbsp;{{vm.article.imgs.length}}</span>
    </div>

    <nav>
        <ul class="pager hidden-sm hidden-xs">
            <li><a href="#" ng-click="vm.slide('prev')">上一张</a></li>
            <li><a href="#">{{vm.article.curImgIndex + 1}}&nbsp;&nbsp;/&nbsp;&nbsp;{{vm.article.imgs.length}}</a></li>
            <li><a href="#" ng-click="vm.slide('next')">下一张</a></li>
        </ul>
    </nav>

    <div class="article-view-content col-md-12 col-sm-12 col-xs-12 no-padding-right">
        <small class="pull-right">
            <em class="text-muted">
                由
                <span ng-if="vm.article.user" ng-bind="vm.article.user.displayName"></span>
                <span ng-if="!vm.article.user">Deleted User</span>

                发表于
                <span ng-bind="vm.article.created | date: 'yyyy-MM-dd HH:mm'"></span>
            </em>
        </small>
    </div>

    <div class="article-view-content col-md-12 col-sm-12 col-xs-12 no-padding-left no-padding-right" ng-bind-html="vm.article.content | ArticlesTrim"></div>
    <div class=" col-md-12 col-sm-12 col-xs-12 no-padding-right article-page-footer-line">
        <small class="pull-right">
            <em class="text-muted">
                商城：&nbsp;&nbsp;
                <span class="list-article-date">{{vm.article.store}}</span>
            </em>
        </small>
    </div>
    <br>
    <div class="  col-md-12 col-sm-12 col-xs-12 article-page-footer">
        <div class="col-md-12 container-fluid article-page-footer">
            <div class="btn-group-xs col-md-6 col-sm-6 col-xs-7 no-padding-left view-article-bottom">
                <button type="button" class="btn btn-default" ng-click="vm.article.clickForUpdateVote(true)" ng-disabled="vm.article.isVoted()">
                    <span class="glyphicon glyphicon-thumbs-up"></span>大爱 {{vm.article.goodVotes}}
                </button>
                <button type="button" class="btn btn-default" ng-click="vm.article.clickForUpdateVote(false)" ng-disabled="vm.article.isVoted()">
                    <span class="glyphicon glyphicon-thumbs-down"></span>无爱 {{vm.article.badVotes}}
                </button>
            </div>

            <div class="col-md-6 col-sm-6 col-xs-5 footer-inner-margin pull-right no-padding-right">
                <div class="col-md-9 hidden-xs list-article-source ">
                    <span class="list-article-date">{{vm.article.created | date: 'yyyy-MM-dd HH:mm'}}</span>
                </div>

                <a ng-href="{{vm.article.outLink}}" target="_blank" rel="nofollow" class="col-md-3 btn btn-danger pull-right">海淘一下</a>
            </div>
        </div>
    </div>

</section>
